<template>
  <div style="width: 100%; height: 100%; display: flex;
      flex-direction: column; justify-content: center; align-items: center;">
    <el-form style="width: 30%;" label-width="80px">
      <el-form-item label="头像">
        <img :src="header" style="width: 100px; height: 100px; background-color: white; border-radius: 50px;"/>

        <!-- 上传控件 -->
        <el-upload
          class="upload-demo"
          :action="updatePath"
          multiple
          :on-error="uploadError"
          :on-success="uploadSucc"
          :limit="1">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>

      </el-form-item>
      <el-form-item label="姓名">
        <el-input width="200px" v-model="form.name" placeholder="请输入教师姓名"></el-input>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model="form.age" placeholder="请输入教师年龄"></el-input>
      </el-form-item>
      <el-form-item label="个人简介">
        <el-input type="textarea" v-model="form.info" placeholder="请输入教师的个人简介"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">修改</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        updatePath: this.$.baseUrl + "/user/img/uploader",
        //用户头像
        header: "../../static/logo.png",
        //表单对象
        form: {
          id: null,
          name: null,
          age: null,
          info: null,
          header: null
        }
      }
    },
    methods: {
      //文件上传失败回调
      uploadError(err){
        this.$message.error("头像上传失败！");
      },
      //文件上传成功回调
      uploadSucc(response){
        this.$message.success("头像上传成功！");
        //将上传后的头像名称 放入到表单对象中
        this.form.header = response.data;
        //回显头像
        this.header = this.$.getImgUrl(this.form.header);
      },
      //提交修改
      onSubmit(){
        this.$.ajax({
          type: "POST",
          url: "/user/teacher/updateTeacherInfo",
          data: this.form,
          success: (jwtToken) => {
            this.$message.success("修改教师信息成功！");
            //覆盖本地的token
            this.$.saveUserToken(jwtToken);
            //刷新
            location.reload();
          }
        });
      }
    },
    mounted(){
      //获取用户信息
      var user = this.$.parseJwtToken();
      this.form.id = user.id;
      this.form.name = user.name;
      this.form.age = user.age;
      this.form.header = user.header;
      this.form.info = user.info;

      //设置头像的显示
      if(user.header) {
        this.header = this.$.getImgUrl(user.header);
      }

      // //发送请求 修改教师信息
      // this.$.ajax({
      //   type: "POST",
      //   url: "/user/teacher/updateTeacherInfo",
      //   data: {},
      //   success: () => {
      //     this.$message.success("修改信息成功！");
      //   }
      // });
    }
  }
</script>

<style scoped>

</style>
